Hino_Thamrin/pages/product/[s].js

import React from 'react';
import Header from "@/components/Company/Header";
import Footer from "@/components/Company/Footer";
import ProductDetail from '@/components/Common/new/ProductDetails';

import Product from "@/api/new/product"
import Company from "@/api/new/company";
import Cookies from "cookies";

const Shop = function ({ companyData,company,icon,desc,sosmed,details, backend, user, ...props }) {
    return (
        <>
            <Header company={company} icon={icon}/>

            <ProductDetail detailproduct={details}/>

            <Footer company={companyData} info={desc} social={sosmed} icon={icon}/>

        </>
    )
}

export default Shop;

export async function getServerSideProps(context) {
    var props = {};
    var {query} = context;
    var companyName = process.env.NEXT_PUBLIC_COMPANY;
    try{
        var details = await Product.GetDetailProduct(query.s||0);
        if(details["STATUS"] === 1 && details["DATA"]["product"].data){
            props["details"] = details["DATA"]["product"].data.attributes;
            companyName = (details["DATA"]["product"].data.attributes.Company.data)?details["DATA"]["product"].data.attributes.Company.data.attributes.Name:'yamaha';
        }
        var res = await Company.companyByName(companyName);
        if (res["STATUS"] === 1) {
            props["icon"] = res["DATA"]["companies"].data[0].attributes.Icon.data.attributes.url;
            props["desc"] = res["DATA"]["companies"].data[0].attributes.Description;
            props["sosmed"] = res["DATA"]["companies"].data[0].attributes.Social_Medias.data;
            props["companyData"] =res["DATA"]["companies"].data[0].attributes;
        }
        companyName = companyName.toLowerCase();
        props["company"] = companyName;
    }
    catch(e){
        console.log('error',e);
    }
    return {
        props
    };
}